<!doctype html>
<!--
Copyright 2014 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="description" content="Sample illustrating the use of CSS Shapes Level 1.">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>CSS Shapes Level 1 Sample</title>

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="../images/touch/chrome-touch-icon-192x192.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-title" content="CSS Shapes Level 1 Sample">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon-precomposed.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
    <meta name="msapplication-TileColor" content="#3372DF">

    <link rel="icon" href="../images/favicon.ico">

    <link rel="stylesheet" href="../styles/main.css">
  </head>

  <body>
    <h1>CSS Shapes Level 1 Sample</h1>
    <p>Available in <a href="https://www.chromestatus.com/feature/5163890719588352">Chrome 37+</a></p>

    <style>
      .shape {
        width: 160px;
        height: 160px;
        background-color: red;
        background-size: 260px 260px;
      }
      p {
        width: 100%;
        max-width: 500px;
        font-size: 14px;
      }

      p:after {
        content: '';
        display:block;
        clear: both;
      }

      .polygon {
        -webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
        clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
      }

      .circle {
        -webkit-clip-path: circle(80px at 50% 50%);
        clip-path: circle(80px at 50% 50%);
      }

      .inset {
        border-radius: 40px;
        width: 140px;
        height: 140px;
      }
    </style>

    <h2>Defining the shape</h2>

    <!-- // [START shape-outside-polygon] -->
    <style>
      .polygon {
        shape-outside: polygon(
          50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
        );
        float: left;
      }
    </style>
    <div class="shape polygon"></div>
    <p>
      Thanks to the <code>shape-outside</code> css property set on
      the element on the left, this paragraph is flowing around the polygon
      shape defined in that property's value.
    </p>
    <!-- // [END shape-outside-polygon] -->

    <!-- // [START shape-outside-circle] -->
    <style>
      .circle {
        shape-outside: circle(80px at 50% 50%);
        float: left;
      }
    </style>
    <div class="shape circle"></div>
    <p>
      There are four basic shapes supported: <code>polygon(), circle(), ellipse()
      and inset()</code>. This circle is defined using the radius (<code>80px</code>)
      and the center position (<code>at 50% 50%</code>).
    </p>
    <!-- // [END shape-outside-polygon] -->

    <!-- // [START shape-outside-inset] -->
    <style>
      .inset {
        shape-outside: inset(0px round 50px) border-box;
        float: left;
      }
    </style>
    <div class="shape inset"></div>
    <p>
      <code>inset()</code> is used to create rectangular shapes
      inside an element. It is useful for defining some rounded
      corners for the float area.
    </p>
    <!-- // [END shape-outside-inset] -->

    <!-- // [START shape-outside-image] -->
    <style>
      .cat {
        shape-outside: url(cat.png);
        shape-image-threshold: 0.5;
        float: left;
        background: url('cat.png') no-repeat;
      }
    </style>
    <div class="shape cat">
    </div>
    <p>
      You can use alpha channel of an image to float text around it.
      Pass the image's url to the <code>shape-outside</code> property.
      The shape is defined by the pixels whose alpha value is greater than
      the threshold specified in the <code>shape-image-threshold</code>.
    </p>
    <!-- // [END shape-outside-image] -->

    <h2>Shape spacing</h2>

    <!-- // [START shape-outside-margin] -->
    <style>
      .margin {
        margin: 20px;
        shape-outside: inset(0px round 50px) border-box;
        shape-margin: 20px;
      }
    </style>
    <div class="shape circle margin"></div>
    <p>
      <code>shape-margin</code> creates a space between the shape defined in
      <code>shape-outside</code> and the flowing text around it.
    </p>
    <!-- // [END shape-outside-margin] -->

    <!-- // [START shape-outside-margin-box] -->
    <style>
      .box {
        height: 50px;
        width: 50px;
        padding: 1em;
        margin: 1em;
        border: 1em solid yellow;
        box-shadow: 0 0 0 1em blue;
        float: left;
      }
      .margin-box {
        shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%) margin-box;
      }
    </style>
    <div class="shape box margin-box">
      <p>content</p>
    </div>
    <p>
      CSS shapes use <em>reference box</em> to define the exact layout of
      the float area. Apart from the default width and height of the element,
      <code>margin-box</code>, <code>content-box</code>,
      <code>padding-box</code>, and <code>border-box</code> can be used.
      This shape uses <code>margin-box</code>, defined in the
      <code>shape-outside</code> property.
    </p>
    <!-- // [END shape-outside-margin-box] -->

    <!-- // [START shape-outside-border-box] -->
    <style>
      .box {
        height: 50px;
        width: 50px;
        padding: 1em;
        margin: 1em;
        border: 1em solid yellow;
        box-shadow: 0 0 0 1em blue;
        float: left;
      }
      .border-box {
        shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%) border-box;
      }
    </style>
    <div class="shape box border-box">
      <p>content</p>
    </div>
    <p>
      This shape uses <code>border-box</code>, defined in the
      <code>shape-outside</code> property. The content is in red,
      border in yellow and margin area in light blue.
    </p>
    <!-- // [END shape-outside-border-box] -->

    <!-- // [START shape-outside-padding-box] -->
    <style>
      .box {
        height: 50px;
        width: 50px;
        padding: 1em;
        margin: 1em;
        border: 1em solid yellow;
        box-shadow: 0 0 0 1em lightblue;
        float: left;
      }
      .padding-box {
        shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%) padding-box;
      }
    </style>
    <div class="shape box padding-box">
      <p>content</p>
    </div>
    <p>
      This shape uses <code>padding-box</code>, defined in the
      <code>shape-outside</code> property. The content is in red,
      border in yellow and margin area in light blue.
    </p>
    <!-- // [END shape-outside-padding-box] -->

    <!-- // [START shape-outside-content-box] -->
    <style>
      .box {
        height: 50px;
        width: 50px;
        padding: 1em;
        margin: 1em;
        border: 1em solid yellow;
        box-shadow: 0 0 0 1em lightblue;
        float: left;
      }
      .content-box {
        shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%) content-box;
      }
    </style>
    <div class="shape box content-box">
      <p>content</p>
    </div>
    <p>
      This shape uses <code>content-box</code>, defined in the
      <code>shape-outside</code> property. The content is in red,
      border in yellow and margin area in light blue.
    </p>
    <!-- // [END shape-outside-content-box] -->

    <script>
      /* jshint ignore:start */
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-53563471-1', 'auto');
      ga('send', 'pageview');
      /* jshint ignore:end */
    </script>
    <!-- Built with love using Web Starter Kit -->
  </body>
</html>
